// 其他js文件获取到的元素本js文件也可以用（一个网页只有一个window）
// 通过事件委托进行事件绑定
// tr标签以及里面的标签内容都是根据数据进行渲染的，所以不能绑定事件，所以将事件委托给tbody
tbody.addEventListener('click', function (e) {
    // 获取事件源
    const target = e.target;
    // classList方法获取的是拆开之后的class名的伪数组
    // 用Array.from将伪数组转换会数组
    const classes = Array.from(target.classList);
    // 从当前的按钮出发找到tr，给tr添加class名修改效果
    // 当前的事件源就是编辑按钮
    const tr = target.parentNode.parentNode;
    // 对从事件源处获得的class名数组进行内容判断
    // includes方法验证是否有相应的class名
    if (classes.includes('btn-customize-edit')) {
        // 如果有这个类名，说明这个事件源就是编辑按钮
        // classList的add方法，可以在原来的基础上添加类名，而原class不受影响
        // classList的remove方法可以移除一个class
        tr.classList.add('dis-customize-non');
        // 点击编辑按钮之后，input框中要有原本要修改的内容
        // 需要获得span中的内容
        // 找到一行tr中所有的span
        const spans = tr.querySelectorAll('span');
        // 通过forEach循环赋值
        spans.forEach(span => {
            // span的下一个兄弟元素(input)的value值就是当前span的内容
            span.nextElementSibling.value = span.innerHTML;
        });
    } else if (classes.includes('btn-customize-sure')){
        // 如果查询到class名是确定按钮的，就把修改后的数据发送到后端
        // 获取tr上的自定义属性data-id
        const id = tr.getAttribute('data-id');
        const name = tr.querySelector('.inputName').value;
        const price = tr.querySelector('.inputPrice').value;
        const num = tr.querySelector('.inputNum').value;
        const size = tr.querySelector('.inputSize').value;
        // 把数据发送到后端
        utils.fetch('./api/shop/update.php', {id, name, price, num, size}).then(resp => {
            // 判断后端返回的数据
            if (resp.code === 200) {
                // 说明数据库更新成功
                // 取消表格的编辑效果---去掉class名
                tr.classList.remove('dis-customize-non');
                // 再将编辑时input的value值赋给对应的span
                // 找到一行tr中的span
                const spans = tr.querySelectorAll('span');
                spans.forEach(span => {
                    span.innerHTML = span.nextElementSibling.value;
                })
            } else {
                console.log(resp.body.msg);
            }
        })
        
    } else if (classes.includes('btn-customize-cancel')) {
        // 如果点击的是取消按钮
        // 则不改变span的innerHTML值
        // 直接将tr的class名改掉
        tr.classList.remove('dis-customize-non');
    } else if (classes.includes('btn-customize-del')) {
        // 如果点击的是删除按钮，则从数据库中删除本条数据
        // 获取一行tr中各个span的值
        const id = tr.getAttribute('data-id');
        // const name = tr.querySelector('td:nth-of-type(2) span').innerHTML;
        // const price = tr.querySelector('td:nth-of-type(3) span').innerHTML;
        // const num = tr.querySelector('td:nth-of-type(4) span').innerHTML;
        // const size = tr.querySelector('td:nth-of-type(5) span').innerHTML;

        // 把数据发送到后端
        utils.fetch('./api/shop/del.php', {id}).then(resp => {
            if (resp.code === 200){
                // 数据删除成功
                // 重新请求数据进行渲染
                getData();
                // console.log(resp.body.msg);
            } else {
                console.log(resp.body.msg);
            }
        })
    }

})